<template>
    <div class="google-ad" v-script="sn">
    </div>
</template>

<script>
    export default {
        props: {
            sn: {
                required: true
            }
        },
        directives: {
            'script': {
                inserted: function (el, binding) {
                    const s = document.createElement('script')
                    s.setAttribute('async', 'async')
                    s.type = 'text/javascript'
                    s.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'
                    el.appendChild(s)
                    const i = document.createElement('ins')
                    i.setAttribute('class', 'adsbygoogle')
                    i.setAttribute('style', 'display:block')
                    i.setAttribute('data-ad-client', 'ca-pub-1051265394774958')
                    i.setAttribute('data-ad-slot',binding.value)
                    i.setAttribute('data-ad-format', 'auto')
                    i.setAttribute('data-full-width-responsive', true)
                    el.appendChild(i)
                    const s1 = document.createElement('script')
                    s1.innerHTML = '(adsbygoogle = window.adsbygoogle || []).push({});'
                    el.appendChild(s1)
                }
            }
        }
    }
</script>

<style lang="less">
    .google-ad{
        width:100%;
        background: white;
    }
</style>
